<template>
  <div class="price">
    <el-row class="priceTop" :gutter="20">
      <el-col :span="4"><div>价格来源</div></el-col>
      <el-col :span="16"><div>低价房型</div></el-col>
      <el-col :span="4"><div>最低价格/每晚</div></el-col>
    </el-row>

    <el-row
      class="hotelPrice"
      :gutter="20"
      v-for="(item, index) in products"
      :key="index"
    >
      <el-col :span="4"
        ><div>{{ item.name }}</div></el-col
      >
      <el-col :span="16">
        <div>{{ item.bestType }}</div>
      </el-col>
      <el-col :span="4">
        <div>
          <span class="orange">￥{{ item.price }}</span
          >起
          <span class="el-icon-arrow-right orange"></span>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  props: ["products"],
};
</script>

<style lang="less" scoped>
.price {
  .priceTop,
  .hotelPrice {
    color: #97a4b3;
    font-weight: 700;
    font-size: 14px;
    border-bottom: 1px solid #dbdde0;
    padding: 20px 40px;
    text-align: center;
  }

  .hotelPrice {
    color: #6c6e72;
    font-weight: 400;
    cursor: pointer;
    &:hover {
      background-color: #f5f7fa;
    }
  }

  .orange {
    color: #fd9900;
    font-size: 18px;
    margin-right: 7px;
  }
}
</style>